<template>
  <div class="page-field">
    <div class="page-part form-body">
      <mt-field label="任务名称" placeholder="任务名称" type="text" v-model="taskBase.name"></mt-field>
      <mt-field label="任务描述" placeholder="任务描述" type="textarea" rows="2" v-model="taskBase.describe"></mt-field>
      <mt-field label="任务酬金" placeholder="任务酬金" type="number" v-model="taskBase.taskValue"></mt-field>
      <mt-field label="截止时间" placeholder="报名截止时间" type="text"
        v-model="taskBase.lastTime" v-on:click.native="open('last_time')"></mt-field>
      <mt-field label="开始时间" placeholder="任务开始时间" type="text"
        v-model="taskBase.startTime" v-on:click.native="open('start_time')"></mt-field>
      <mt-field label="结束时间" placeholder="任务结束时间" type="text"
        v-model="taskBase.overTime" v-on:click.native="open('over_time')"></mt-field>

    </div>

    <div class="page-part form-body">
      <mt-cell :title="'是否存在子任务'">
        <mt-switch v-model="hasSubTask"></mt-switch>
      </mt-cell>

      <div class="" v-show="hasSubTask">
        <mt-field label="任务描述" placeholder="任务描述" type="textarea" rows="2" v-model="describe"></mt-field>
        <mt-field label="任务酬金" placeholder="任务酬金" type="number" v-model="taskValue"></mt-field>
      </div>

      <mt-button v-show="hasSubTask"
        size="small" type="default" class="add-sub-task"
        @click="addSubTask" v-bind:disabled="!checkAddSubTask()"
      >添加为子任务</mt-button>
    </div>

    <div class="page-part, form-body" v-show="hasSubTask" v-for="item in subTasks">
      <mt-cell title="任务描述" :value="item.describe"></mt-cell>
      <mt-cell title="任务酬金" :value="item.taskValue"></mt-cell>
    </div>

    <div class="page-part form-submit">
      <mt-button type="primary" v-on:click="next">下一步</mt-button>
    </div>

    <mt-datetime-picker
      ref="time_picker"
      type="datetime"
      v-model="timePicker"
      year-format="{value}"
      month-format="{value}"
      date-format="{value}"
      hour-format="{value}"
      minute-format="{value}"
      @confirm="handleChange">
    </mt-datetime-picker>

  </div>

</template>

<script>
export default {
  props: ['taskBase', 'subTasks'],
  data() {
    return {
      timePicker: '',
      picker: '',
      hasSubTask: false,
      describe: '',
      taskValue: '',
    };
  },
  methods: {
    next() {
      this.$emit('checkout', 'f-task-data');
    },
    open(picker) {
      this.picker = picker;
      this.$refs.time_picker.open();
    },
    handleChange(value) {
      const time = `${value.getFullYear()}-${value.getMonth() + 1}-${value.getDate()} ${value.getHours()}:${value.getMinutes()}`;
      if (this.picker === 'last_time') {
        this.taskBase.lastTime = time;
        // this.taskBase.lastTime = value.toLocaleString();
      } else if (this.picker === 'start_time') {
        this.taskBase.startTime = time;
      } else if (this.picker === 'over_time') {
        this.taskBase.overTime = time;
      }
    },
    checkAddSubTask() {
      return (this.describe !== '' && this.taskValue !== '');
    },
    addSubTask() {
      this.subTasks.push({
        describe: this.describe,
        taskValue: this.taskValue,
      });
      this.describe = '';
      this.taskValue = '';
    },
  },
};
</script>

<style lang="css">

.form-body {
  text-align: left;
  margin-left: 10px;
  margin-top: 20px;
  color: #42b983;
}

.mint-radiolist-title {
  font-size: 18px;
}

.mint-cell-text {
  margin-left: 16px;
}

.has-sub-task {
  margin-top: 20px;
}

.sub-tasks {
  margin-top: 20px;
}
.add-sub-task {
  margin-top: 10px;
  margin: auto;
  display: block;
}

</style>
